<template>
  <section>
    <van-sticky>
      <PageHeader title="钱包" />
    </van-sticky>

    <div class="pd10 bg-color-white font-common text-vertical-center mb10" v-if="walletAccount">
      <span>总余额：{{walletAccount.balance}}元</span>，
      <span>提现中余额：{{walletAccount.withdrawing_balance}}元</span>，
      <span>可提现余额：<label class="color-red">{{walletAccount.withdraw_balance}}</label>元</span>
    </div>

    <van-tabs v-model="type" @change="onTabChanged" scrollspy>
      <van-tab title="提现记录" name="record">
        <van-list
          class="mt10"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          :immediate-check="false"
          @load="requestData" v-if="type=='record'">
          <div class="flex flex-col bg-color-white font-common round-box mb10 ml10 mr10 pd10"
               v-for="(item, index) in dataList"
               :key="index">
            <div class="flex flex-left flex-row pb10 border-bottom-gray">申请时间：{{item.apply_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>

            <div class="flex flex-left flex-row pb10 border-bottom-gray" v-if="item.pay_time>0">打款时间：{{item.pay_time|timeFormat('yyyy-MM-dd hh:mm:ss')}}</div>

            <div class="flex flex-left flex-row pb10 pt10">
              <div class="flex flex-left flex-row flex-1">
                金额：{{item.amount}}元
              </div>
              <div class="flex flex-left flex-row flex-1">状态：{{item.status_label}}</div>
            </div>

            <div class="flex flex-left flex-row pt10 border-top-gray" v-if="item.remark">{{item.remark}}</div>
          </div>
        </van-list>
      </van-tab>

      <van-tab title="申请提现" name="apply">
        <template v-if="type=='apply'">
          <van-cell-group class="mt10">
            <van-field v-model.number="applyForm.amount" type="number" label="提现金额" placeholder="请输入提现金额" />
            <div class="pd10 font-common" v-if="cfg"><span class="color-red">*</span>最低提现金额：{{cfg.withdraw_cash_min_amount}}元</div>
          </van-cell-group>

          <div class="pd10">
            <van-button type="primary" round block :disabled="walletAccount && walletAccount.withdrawing_balance > 0 ? true : false" @click="onSubmit">提交</van-button>
          </div>
        </template>
      </van-tab>
    </van-tabs>

  </section>
</template>

<script>
import PageHeader from "../../componets/PageHeader";
import {
  myWalletAccountUri,
  userWithdrawAccountMyUri,
  userWithdrawListsUri,
  userWithdrawApplyUri
} from "../../../common/api";

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      cfg: null,
      account: null,
      walletAccount: null,
      applyForm: {amount: 0.00},
      type: 'record',

      currentPage: 1,
      lastPage: 0,
      total: 0,
      pageSize: 10,
      loading: false,
      finished: false,
      dataList: [],
    }
  },
  methods: {
    onTabChanged(name, title) {
      console.log(name);
    },
    myWalletAccount() {
      const that = this;
      const url = myWalletAccountUri;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast(msg);
        } else {
          that.walletAccount = data;
        }
      }, response => {
        // error callback
      })
    },
    getAccount() {
      const that = this;
      const url = userWithdrawAccountMyUri;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          if(data) {
            that.account = data;
          }
        }
      }, response => {
        // error callback
      })
    },
    onSubmit() {
      if(this.account == null || this.account.alipay_name.length == 0 || this.account.alipay_account.length == 0) {
        this.toast('请先设置提现账号');
        this.$router.push({name: 'MySettingReceiveMoney'});
        return;
      }
      if(this.applyForm.amount > this.walletAccount.withdraw_balance) {
        this.toast('可提现金额不足');
        return;
      }
      if(this.applyForm.amount < this.cfg.withdraw_cash_min_amount) {
        this.toast('提现金额不能少于最低提现金额');
        return;
      }

      const that = this;
      that.$http.post(userWithdrawApplyUri, this.applyForm, {emulateJSON: true}).then(response => {
        let {msg, code, data} = response.body
        if (code != 0) {
          that.toast.fail(msg)
        } else {
          that.applyForm = {amount: 0.00};
          that.myWalletAccount();
          that.activeTab = 'record';
          that.toast.success('提交成功');
        }
      }, response => {
        that.toast.fail('发生错误')
      })
    },
    requestData() {
      const that = this;
      this.loading = true;
      const url = userWithdrawListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage;
      this.$http.get(url).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.toast.fail(msg);
        } else {
          that.loading = false;
          if (that.currentPage >= data.last_page) {
            that.finished = true;
          }
          that.currentPage = that.currentPage + 1;
          for (let i = 0; i < data.data.length; i++) {
            that.dataList.push(data.data[i]);
          }
          that.total = data.total;
          that.lastPage = data.last_page;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {
    this.myWalletAccount();
    this.getAccount();
    this.requestData();

    this.cfg = this.GLOBAL.siteConfig;
    this.EventBus.$on('OnSiteConfigLoaded', () => {
      this.cfg = this.GLOBAL.siteConfig;
    });
  }
}
</script>

<style scoped>

</style>
